<template>
  <div class="dashboard-container">
    <el-row :gutter="20">
      <el-col :span="6">
        <el-card class="el-top-card">
          <div class="item">
            <svg-icon class="icon" icon-class="documentation" />
            <div class="text">图片数: {{ statisticInfo.imageCount }}</div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="el-top-card">
          <div class="item">
            <svg-icon class="icon" icon-class="tab" />
            <div class="text">标签数：{{ statisticInfo.labelCount }}</div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="el-top-card">
          <div class="item">
            <svg-icon class="icon" icon-class="list" />
            <div class="text">评论数: {{ statisticInfo.commentCount }}</div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="el-top-card">
          <div class="item">
            <svg-icon class="icon" icon-class="user" />
            <div class="text">用户数：{{ statisticInfo.userCount }}</div>
          </div>
        </el-card>
      </el-col>

      <el-col :span="8">
        <el-card class="tag-card" :span="8">
          <div slot="header" class="clearfix">
            <span>标签云</span>
          </div>
          <wordcloud
            :data="hotTag"
            nameKey="标签名"
            valueKey="频次"
            :color="myColors"
            :showTooltip="true"
            :wordClick="wordClickHandler"
          >
          </wordcloud>
        </el-card>
      </el-col>
      <el-col :span="16">
        <el-card :span="8">
          <div slot="header" class="clearfix">
            <span>统计</span>
          </div>
          <div class="chart" id="chart"></div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import { getAllLabelsApi } from "@/api/label";
import { getStatisticInfoApi, getChartInfoApi } from "@/api/system";
import wordcloud from "vue-wordcloud";

export default {
  name: "Dashboard",
  data() {
    return {
      myColors: ["#1f77b4", "#629fc9", "#94bedb", "#c9e0ef"],
      hotTag: [],
      statisticInfo: {},
    };
  },
  computed: {
    ...mapGetters(["userInfo"]),
  },
  components: {
    wordcloud,
  },
  created() {
    getAllLabelsApi({}).then((res) => {
      this.hotTag = res.data.map((item) => {
        return { 标签名: item.labelName, 频次: item.labelCount };
      });
    });
    getStatisticInfoApi().then((res) => {
      this.statisticInfo = res.data;
    });
  },
  mounted() {
    getChartInfoApi().then((res) => {
      let _data = res.data;
      this.drawChart(_data.xaxis, _data.yaxis);
    });
  },
  methods: {
    drawChart(x, y) {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById("chart"));
      // 指定图表的配置项和数据
      let option = {
        title: {
          text: "网站近七天访问量",
        },
        toolbox: {
          show: true,
          feature: {
            dataView: {
              show: true,
            },
            restore: {
              show: true,
            },
            dataZoom: {
              show: true,
            },
            saveAsImage: {
              show: true,
            },
            magicType: {
              type: ["line", "bar"],
            },
          },
        },
        tooltip: {},
        legend: {
          data: ["访问量"],
        },
        xAxis: {
          data: x,
        },
        yAxis: {},
        dataZoom: [
          {
            type: "slider",
            start: 0,
            end: 100,
          },
        ],
        series: [
          {
            name: "访问量",
            type: "line",
            data: y,
            label: {
              normal: {
                show: true,
                position: "top",
              },
            },
            markPoint: {
              data: [
                { type: "max", name: "最大值" },
                { type: "min", name: "最小值" },
              ],
            },
            markLine: {
              data: [{ type: "average", name: "平均值" }],
            },
          },
        ],
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },
    clickTagItem(tag) {
      const labelName = tag.name;
      console.log(labelName);
    },
    wordClickHandler(name, value, vm) {
      this.$router.push({
        path: "/image/images",
        query: {
          labelName: name,
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
    .tag-card {
      width: 400px;
    }
    .chart {
      height: 400px;
    }
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
div .tooltip {
  padding: 3px;
  font-size: 12px;
}
.el-top-card {
  margin: 0 10px 20px 0;
  height: 100px;
  text-align: center;
  .item {
    display: flex;
    justify-content: space-around;
    .icon {
      width: 60px;
      height: 60px;
      color: #409eff;
    }
    .text {
      line-height: 60px;
      color: #303133;
      font-size: 18px;
    }
  }
}
</style>
